<template>
    <div>
        <div id="main" v-wechat-title="$route.meta.title" class="top">
            <div class="header">
                <div class="header_left">
                    <div class="header_logo"><span>NiLiNiLi</span></div>
                    <div class="header_main">
                        <router-link to="/home">
                            <a
                                :class="
                                    selected === 0
                                        ? 'header_block_hover'
                                        : 'header_block'
                                "
                                id="index"
                                >首页</a
                            >
                        </router-link>
                        <router-link to="/explore">
                            <a
                                :class="
                                    selected === 1
                                        ? 'header_block_hover'
                                        : 'header_block'
                                "
                                id="explore"
                                >探索</a
                            >
                        </router-link>
                        <a
                            :class="
                                selected === 2
                                    ? 'header_block_hover'
                                    : 'header_block'
                            "
                            id="tags"
                            >标签</a
                        >
                        <router-link to="/photographer">
                            <a
                                :class="
                                    selected === 3
                                        ? 'header_block_hover'
                                        : 'header_block'
                                "
                                id="photographer"
                                >摄影师</a
                            >
                        </router-link>
                        <a
                            :class="
                                selected === 4
                                    ? 'header_block_hover'
                                    : 'header_block'
                            "
                            id="photographer_employ"
                            >签约摄影师招募</a
                        >
                        <a
                            :class="
                                selected === 5
                                    ? 'header_block_hover'
                                    : 'header_block'
                            "
                            id="activity"
                            >热门活动</a
                        >
                    </div>
                </div>
                <div class="header_right">
                    <!-- 登录 -->
                    <div v-if="islogin === true" class="register">
                        <router-link to="/upload">
                            <el-button
                                class="upload_button"
                                type="primary"
                                size="mini"
                            >
                                上传
                            </el-button></router-link
                        >
                        <router-link to="/personal">
                            <button
                                :class="
                                    selected === 6
                                        ? 'register_hover'
                                        : 'register'
                                "
                            >
                                个人中心
                            </button>
                        </router-link>
                        <button class="register" @click="_logout">退出</button>
                    </div>
                    <!-- 未登录 -->
                    <div v-if="islogin === false" class="register">
                        <router-link to="/register">
                            <button
                                :class="
                                    selected === 7
                                        ? 'register_hover'
                                        : 'register'
                                "
                            >
                                注册
                            </button>
                        </router-link>
                        <router-link to="/login">
                            <button
                                :class="
                                    selected === 8 ? 'login_hover' : 'login'
                                "
                            >
                                登录
                            </button></router-link
                        >
                    </div>
                    <div class="header_search">
                        <input
                            type="text"
                            v-model="searchWord"
                            class="header_search_text"
                        />
                        <svg
                            t="1663224582199"
                            class="header_search_icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="3941"
                            width="26"
                            height="26"
                            @click="_search"
                        >
                            <path
                                d="M726.624149 462.055494c0-157.152203-123.57241-284.307208-276.247648-284.307208S174.128853 304.903292 174.128853 462.055494c0 156.705018 123.57241 283.859 276.247648 283.859S726.624149 618.760512 726.624149 462.055494zM864.523869 943.810656 696.178743 770.987542l-1.343601-1.790786c-66.711378 55.965639-151.779845 89.545432-244.459664 89.545432-213.56605 0-386.389164-177.748287-386.389164-396.686694 0-219.386616 172.823114-397.133879 386.389164-397.133879 213.117842 0 386.389164 177.748287 386.389164 397.133879 0 82.829474-25.073048 159.838382-67.159586 223.416396l5.372358 4.476965 168.345126 172.823114c21.490453 22.385846 21.490453 58.651818 0 81.038688C921.385924 965.749318 886.46253 965.749318 864.523869 943.810656z"
                                p-id="3942"
                                fill="#9FA3A6"
                            ></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import userApi from '../request/userApi';
export default {
    data() {
        return {
            islogin: this.$store.state.islogin,
            selected: this.$store.state.selected,
            searchWord: '',
        };
    },
    created() {
        this.checkLogin();
    },
    watch: {
        '$store.state.islogin'(newVal) {
            this.islogin = newVal;
        },
        '$store.state.selected'(newVal) {
            this.selected = newVal;
        },
    },
    methods: {
        // 检测登录状态
        checkLogin() {
            var token = window.sessionStorage.getItem('token');
            if (token !== null || token !== undefined) {
                userApi.checkLogin().then((res) => {
                    if (res.code === 200) {
                        userApi.getUserInfo().then((res) => {
                            if (res.code === 200) {
                                this.$store.commit(
                                    'setUserId',
                                    res.data.userId
                                );
                            }
                        });
                        this.$store.commit('changeLoginState', true);
                        this.islogin = this.$store.getters.islogin;
                    }
                });
                return;
            }
        },
        // 退出登录
        _logout() {
            console.log('token = ' + window.sessionStorage.getItem('token'));
            this.$confirm('确定退出登录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    userApi.userlogout().then((res) => {
                        if (res.code === 200) {
                            this.$store.commit('changeLoginState', false);
                            this.islogin = this.$store.getters.islogin;
                            window.sessionStorage.clear();
                            this.$message({
                                type: 'success',
                                message: '退出成功!',
                            });
                            // 改变标签高亮状态
                            this.$store.commit('changeSelectState', 0);
                            // 改变存储的id
                            this.$store.commit('setUserId', -1);
                            this.$router.push('/home');
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出',
                    });
                });
        },
        // search
        _search() {
            if (this.searchWord === '') {
                this.$message({
                    type: 'info',
                    message: '请输入搜索内容',
                });
                return;
            }
            this.$router.push({
                path: '/search/' + this.searchWord,
            });
            this.$store.commit('setSearchWord', this.searchWord);
        },
    },
};
</script>


<style scoped>
#main {
    padding: 0;
    margin: 0;
    height: 100%;
    text-align: center;
}
.header {
    width: 100%;
    height: 74px;
    background-color: rgba(0, 0, 0, 0.9);
}

.header .header_left {
    float: left;
    margin-left: 5%;
    height: 100%;
    width: 60%;
}

.header .header_right {
    /* margin-right: 5%; */
    height: 100%;
    width: 35%;
    float: right;
}

.header .header_left .header_logo {
    float: left;
    color: white;
    height: 100%;
}
.header .header_left .header_logo span {
    display: inline-block;
    padding-top: 7%;
    font-size: 45px;
    height: 80%;
    line-height: 100%;
}

.header .header_left .header_main {
    height: 100%;
}

.header .header_left .header_main .header_block {
    display: inline-block;
    padding: 2.5% 1% 0% 1%;
    height: 56%;
    color: #999;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header .header_left .header_main .header_block:hover {
    color: #ffffff;
}
.header_search {
    width: 270px;
    margin-top: 2.5%;
    margin-right: 30px;
    background-color: hsla(0, 0%, 100%, 0.1);
    border-radius: 50px;
    height: 50px;
    float: right;
    cursor: pointer;
}
.header_search_icon {
    float: left;
    margin-top: 5%;
    padding-right: 3%;
}

.header_search_text {
    background-color: transparent;
    color: #fff;
    padding-left: 10px;
    font-size: 18px;
    outline: none;
    border: none;
    height: 100%;
    float: left;
}
.header_search_icon:hover path {
    fill: #ffffff;
}
.login {
    float: right;
    height: 100%;
    border: 0px;
    color: #999;
    font-size: 18px;
    background-color: #191919;
}
.login:hover {
    color: #fff;
    cursor: pointer;
}
.register {
    float: right;
    border: 0px;
    height: 100%;
    color: #999;
    font-size: 18px;
    background-color: #191919;
}
.register:hover {
    color: #fff;
    cursor: pointer;
}
.header_block_hover {
    display: inline-block;
    padding: 2.5% 1% 0% 1%;
    height: 56%;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.login_hover {
    margin-right: 20px;
    float: right;
    height: 100%;
    border: 0px;
    color: #ffffff;
    font-size: 18px;
    background-color: #191919;
}
.register_hover {
    float: right;
    border: 0px;
    height: 100%;
    color: #ffffff;
    font-size: 18px;
    background-color: #191919;
}
.upload_button {
    /* margin-left: 20px; */
    margin-top: 20px;
    margin-right: 10px;
    float: right;
    line-height: 100%;
    /* height: 100%; */
    /* border: 0px; */
    /* color: #999; */
    font-size: 18px;
    /* background-color: #191919; */
}
</style>